<template>
  <view class="boxs whe_maxv" style="padding:20rpx 10px 20px">
    <scroll-view :scroll-y="true" @scrolltolower="scrolltolower" style="height: 100%">
      <view>
        <!--    搜索栏-->
        <view class="wh_f jz"
              style="background-color: #ffffff;border: 1px solid #3a9e5f;border-radius: 50px;
              padding: 2px">
          <view class="jz_flex" style="width: 50px">
            <view style="width: 20px">
              <view class="img_zfx">
                <image src="../../static/icon/ss_1.png" />
              </view>
            </view>
          </view>
          <view class="flex_1 czjz_flex">
            <up-input placeholder="搜索订单/商品" border="none" v-model="textValue"
                      style="color: #808080"></up-input>
          </view>
          <view @click="getList" class="jz_flex" style="height: 35px;width: 80px;background-color: #3a9e5f;border-radius: 50px">
            <text style="color: white">搜索</text>
          </view>
        </view>
        <view>
          <up-tabs lineColor="#3a9e5f" :list="tabslist" @change="clicktabs"></up-tabs>
        </view>
      </view>
      <view>
          <view v-for="(item,index) in list" :key="index" @click="orderDetail(item)"
                class="xyy bor_10 mag_t-15" style="padding: 5px 10px 10px">
            <view class="wh_f pad_5_0" style="border-bottom: 1px solid #f0f2ee">
              <view class="flex_1">
                <image v-if="item.get_type==3" class="centerdq" src="../../static/icon/typs.png" style="width: 24px;height: 24px"></image>
                <image v-if="item.get_type==1" class="centerdq" src="../../static/icon/ddzt.png" style="width: 24px;height: 24px"></image>
                <image v-if="item.get_type==2" class="centerdq" src="../../static/icon/shsm.png" style="width: 24px;height: 24px"></image>
                <text class="centerdq fz_16 mag_l-5 wz_black em">{{ item.get_type_str }}</text>
              </view>
              <view class="centerdq fz_14 wz_qhui">{{ item.order_status_str }}</view>
            </view>
            <view class="ddisp bhh ccgl pad_10_0" style="border-bottom: 1px solid #f0f2ee">
              <view style="width: 20%">
                <view class="disp mag_r-10" v-for="(items,indexs) in item.goods" :key="indexs">
                  <image :src="items.goods_image"
                         style="width: 60px;height: 60px;border-radius: 10px"></image>
                </view>
              </view>
            </view>
            <view class="wh_f fz_14 pad_t-10 wz_hui">
              <view class="flex_1">
                {{ item.updated_at }}
              </view>
              <view>
                共计{{ item.goods.length }}件商品
              </view>
            </view>
            <view class="wz_rigdq mag_t-10 fz_12">
              <view v-if="item.order_status === 0">
                <text class="fz_16 em wz_black centerdq">待支付</text>
              </view>
              <view v-if="item.order_status !== 0 && item.order_status !== 6">
                <text class="centerdq fz_14">实付款:</text>
                <text class="fz_18 em wz_black centerdq">
                  ¥{{ item.pay_price }}
                </text>
              </view>
            </view>
            <view v-if="item.order_status == 3 || item.order_status == 4 || (isLessThan5Minutes(item.created_at) && item.order_status == 1)"
                  class="fz_14 wz_rigdq"
                  style="padding: 15px 0 5px">
              <!--        <text @click.stop="AgainOrder(item)" class="bor_5" style="border: 1px solid #dfe1dd;padding: 12rpx 24rpx">再来一单</text>-->
              <text v-if="item.order_status == 3" @click.stop="Received(item.id)"
                    class="bor_5 wz_white mag_l-15"
                    style="padding: 12rpx 24rpx;background-color: #3a9e5f">确认收货</text>
              <text v-if="isLessThan5Minutes(item.created_at) && item.order_status == 1"
                    @click.stop="delOrder(item.id)"
                    class="bor_5 wz_white mag_l-15"
                    style="padding: 12rpx 24rpx;background-color: #3a9e5f">取消订单</text>
              <!--        <text v-if="item.order_status == 4" @click.stop="appraise(item.id)"-->
              <!--              class="bor_5 wz_white mag_l-15"-->
              <!--              style="padding: 12rpx 24rpx;background-color: #3a9e5f">评价</text>-->
            </view>
          </view>
          <view v-if="list.length<1" class="jz_flex" style="height: 50vh">
            <view class="wz_jz">
              <image style="width: 200px;height: 130px" src="https://xdjzapi.towngo.cn/uploads/images/wx/202507/08/xcx_1751945016_KEXbwbZngN.png"></image>
              <view class="mag_t-20">暂无订单!</view>
            </view>
          </view>
      </view>
      <!--      底部加载提示-->
      <view v-if="jzisTrue === 1" style="height: 20px"></view>
      <view v-if="jzisTrue === 2" class="wz_jz">
        <view style="height: 26px;padding-top: 14px">
          <text class="centerdq">
            <text class="fz_14" style="margin-right: 10px">加载中</text>
          </text>
          <view class="disp centerdq">
            <view class="jzjdt"></view>
          </view>
        </view>
      </view>
      <view v-if="jzisTrue === 3" class="wz_jz">
        <view style="height: 16px">
          <text class="centerdq">
            <text class="fz_14 wz_qhui">没有更多商品了</text>
          </text>
        </view>
      </view>
    </scroll-view>
    <up-popup :safeAreaInsetBottom="false"
              @close="close"
              @open="open"
              customStyle="width:70%;border-radius: 20px"
              :show="show" mode="center">
      <view>
        <view style="padding: 15px">
          <view class="fz_16 wz_jz em pad_b_10">
            <text>确认收货</text>
          </view>
          <view class="split_2 pad_10_0 wz_jz">
            <view>
              <text class="bor_1_hui bor_20 fz_12 em" @click="show=false"
                    style="background-color: #d5f0dd;color: #3a9e5f;
                  padding: 5px 30px 6px">取 消</text>
            </view>
            <view>
              <text class="bor_1_hui bor_20 fz_12 em"
                    @click="shopTrue"
                    style="background-color: #3a9e5f;color:white;
                  padding: 5px 30px 6px">确 定</text>
            </view>
          </view>
        </view>
      </view>
    </up-popup>
  </view>
</template>
<script>
import {doRefund, getShopGoodsList, miniPay, shopOrderList, updateOrder} from "../../Api/shop";
import moment from 'moment';
export default {
  name: "index",
  data(){
    return{
      list:[],
      tabslist:[
          {id:'',name: '全部'},
          {id:0,name: '待付款'},
          {id:1,name: '已付款'},
          {id:3,name: '已发货'},
          {id:4,name: '已完成'},
          {id:7,name: '部分退'},
          {id:5,name: '已评价'},
          {id:2,name: '已退款'},
          {id:6,name: '已关闭'},
      ],
      tab_id:'',
      textValue:'',
      show:false,
      order_id:0,
      jzisTrue:1,
      page:1
    }
  },
  onShow(){
    shopOrderList({
      order_status:this.tab_id
    }).then(res=>{
      this.list = res.data.data
      console.log('订单列表',res.data)
    })
  },
  methods:{
    // 分页
    scrolltolower(){
      // 如果 jzisTrue = 3 没有更多数据了
      if(this.jzisTrue === 3){

      }else{
        if(this.page === 1){
          this.page += 1
        }
        this.jzisTrue = 2
        // 触底了
        setTimeout(()=>{
          this.jzisTrue = 1
          this.getfyList()
        },1000)
      }
    },
    // 判断订单时间是否在5分钟内
    isLessThan5Minutes(orderTime) {
      const now = moment();
      const orderMoment = moment(orderTime);
      const diffInMinutes = now.diff(orderMoment, 'minutes');
      return diffInMinutes < 5;
    },
    delOrder(e){
      let tthis = this
      uni.showModal({
        title: '请确认是否取消订单?',
        content: '将退款到余额',
        success: function (res) {
          if (res.confirm) {
            doRefund({
              order_id:e
            }).then(res=>{
              console.log("取消结果",res)
              tthis.getList(tthis.tab_id)
            })
          } else if (res.cancel) {
          }
        }
      });
    },
    // 确认收货
    Received(e){
     this.order_id = e
     this.show = true
    },
    shopTrue(){
      updateOrder({
        order_id:this.order_id
      }).then(res=>{
        this.show = false
        if(res.success){
          this.showToast('收货成功!')
          this.getList(this.tab_id)
        }
      })
    },
    //消息提示
    showToast(msg, type = "default") {
      uni.showToast({
        title: msg,
        icon: "none", // 图标类型，可选值：success, none
        duration: 2000 // 显示时间，单位毫秒
      });
    },
    // 去评价
    appraise(e){
      console.log(e)
      uni.navigateTo({
        url:'/shophome/appraise/index?id='+e
      })
    },
    // 再来一单
    AgainOrder(e){
      console.log(e.goods)
      let data = []
      e.goods.map(item=>{
        data.push({
          amount:item.goods_amount,
          checked:true,
          goods:item.goods,
          goods_id:item.goods_id
        })
      })
      console.log(111,list)
      let list = encodeURIComponent(JSON.stringify(data))
      uni.navigateTo({
        url:'/porder/orderPay/index?list='+list
      })

    },
    // 订单详情
    orderDetail(e){
      const params = { id:e.id}; // 待传递的参数
      uni.navigateTo({
        url: `/porder/orderDetail/index?id=${params.id}`
      });
    },
    clicktabs(e){
      this.tab_id = e.id
      this.jzisTrue = 1
      this.page = 1
      this.getList(e.id)
    },

    //分页订单列表
    getfyList(){
      shopOrderList({
        page:this.page,
        order_status:this.tab_id,
        keyword:this.textValue
      }).then(res=>{
        // 如果没有数据 说明已经没有更多数据了 改变底部加载状态为3
        if(res.data.data.length<1){
          this.jzisTrue = 3
        }else{
          //有数据 正常合并新的数据
          this.list = this.list.concat(res.data.data); // 或者使用:
          this.page += 1
        }
      })
    },
    // 订单列表
    getList(e){
      shopOrderList({
        order_status:e,
        keyword:this.textValue
      }).then(res=>{
        this.list = res.data.data
        console.log('订单列表',res.data)
      })
    }
  }
}
</script>
<style scoped lang="scss">

</style>
